<template>
	<view class="roc-diyform-search">
		<u-form
			class="roc-form"
			:model="form"
			:rules="rules"
			ref="uForm"
			errorType="message"
			labelPosition="top"
			labelWidth="auto"
			:labelStyle="{ fontSize: '30rpx', lineHeight: '1.6' }"
		>
			<block v-for="(item, index) in formRuleJson" :key="index">
				<!-- 字符 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'input' && item.search == 'search'"
				>
					<roc-input :item="item" v-model="form[item.field]"></roc-input>
				</u-form-item>
				<!-- 字符 范围 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'input' && item.search == 'rangeSearch'"
				>
					<roc-input-range :item="item" v-model="form[item.field]"></roc-input-range>
				</u-form-item>
				<!-- 计数器 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'inputNumber'"
				>
					<u-number-box
						v-model="form[item.field]"
						button-size="60rpx"
						inputWidth="200rpx"
						iconStyle="color: #333;font-size: 26rpx"
						:min="item.props.min || 0"
						:max="item.props.max || Number.MAX_SAFE_INTEGER"
						:step="item.props.step || 1"
						:disabled="item.props.disabled || false"
						:showMinus="item.props.controls == undefined ? true : item.props.controls"
						:showPlus="item.props.controls == undefined ? true : item.props.controls"
					></u-number-box>
				</u-form-item>
				<!-- 开关 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'switch'"
				>
					<u-switch
						v-model="form[item.field]"
						size="46"
						:disabled="item.props.disabled"
						:activeValue="item.props.activeValue || true"
						:inactiveValue="item.props.inactiveValue || false"
					></u-switch>
				</u-form-item>
				<!-- 日期选择器 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'datePicker' && item.search == 'search'"
				>
					<roc-date-picker :item="item" v-model="form[item.field]"></roc-date-picker>
				</u-form-item>
				<!-- 日期选择器范围 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'datePicker' && item.search == 'rangeSearch'"
				>
					<roc-date-picker-range :item="item" v-model="form[item.field]"></roc-date-picker-range>
				</u-form-item>
				<!-- 滑块 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'slider'"
				>
					<u-slider
						v-model="form[item.field]"
						:min="item.props.min || 1"
						:max="item.props.max || 100"
						:step="item.props.step || 1"
						:showValue="item.props.showInput || false"
					></u-slider>
				</u-form-item>
				<!-- 评分 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'rate'"
				>
					<u-rate
						size="36rpx"
						v-model="form[item.field]"
						:disabled="item.props.disabled || false"
						:count="item.props.max || 5"
						:allowHalf="item.props.allowHalf || false"
						:inactiveColor="item.props.voidColor || '#b2b2b2'"
						:minCount="0"
					></u-rate>
				</u-form-item>
				<!-- 富文本 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'fc-editor'"
				>
					<roc-editor
						v-model="form[item.field]"
						:html="form[item.field]"
						:readOnly="item.props.disabled || false"
					></roc-editor>
				</u-form-item>
				<!-- 选择器 -->
				<u-form-item
					@click="curClickFormItem(item)"
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'select'"
				>
					<roc-select :item="item" v-model="form[item.field]"></roc-select>
				</u-form-item>
				<!-- 级联选择器 -->
				<u-form-item
					@click="curClickFormItem(item)"
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'cascader'"
				>
					<roc-cascader :item="item" v-model="form[item.field]"></roc-cascader>
				</u-form-item>
				<!-- 单选框 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'radio'"
				>
					<roc-radio :item="item" v-model="form[item.field]"></roc-radio>
				</u-form-item>
				<!-- 多选框 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'checkbox'"
				>
					<roc-checkbox :item="item" v-model="form[item.field]"></roc-checkbox>
				</u-form-item>
				<!-- 文件 & 图片上传 -->
				<u-form-item
					:prop="item.field"
					:label="item.title"
					:key="index"
					:borderBottom="true"
					v-if="item.type == 'upload'"
				>
					<roc-upload-file
						v-if="item.props.uploadType == 'file'"
						:item="item"
						v-model="form[item.field]"
						:showValue="form[item.field]"
					></roc-upload-file>
					<roc-upload-image v-else :item="item" v-model="form[item.field]"></roc-upload-image>
				</u-form-item>
			</block>
		</u-form>
		<!-- <view class="u-p-30" v-if="showForm && formRuleJson.length">
			<u-button
				type="primary"
				hover-class="none"
				:custom-style="{ backgroundColor: '#409eff', color: '#fff' }"
				shape="circle"
				@click="submit"
			>
				提交
			</u-button>
		</view> -->
		<!-- <u-empty v-else mode="data" textSize="30" iconSize="120" marginTop="160" /> -->
		<!-- <view style="text-align: center;padding-top: 100rpx;" v-else>
			<image src="@/static/img/nullData.png" style="width: 160px;height: 160px;"></image>
			<view style="color: #888;">
				暂无数据~
			</view>
		</view> -->
	</view>
</template>

<script>
import { getCompletedJson } from '@/api/model.js';
import watchformDatahx from './mixins/watchformDatahx.js';


import rocInput from './components/roc-input/roc-input.vue';
import rocInputRange from './components/roc-input-range/roc-input-range.vue';
import RocDatePicker from './components/roc-date-picker/roc-date-picker.vue';
import RocDatePickerRange from './components/roc-date-picker-range/roc-date-picker-range.vue';
import RocEditor from './components/roc-editor/roc-editor.vue';
import RocSelect from './components/roc-select/roc-select.vue';
import RocCascader from './components/roc-cascader/roc-cascader.vue';
import RocRadio from './components/roc-radio/roc-radio.vue';
import RocCheckbox from './components/roc-checkbox/roc-checkbox.vue';
import RocUploadImage from './components/roc-upload-image/roc-upload-image.vue';
import RocUploadFile from './components/roc-upload-file/roc-upload-file.vue';
export default {
	name: 'roc-diyform-search',
	mixins: [watchformDatahx],
	components: {
		rocInput,
		rocInputRange,
		RocEditor,
		RocDatePicker,
		RocDatePickerRange,
		RocSelect,
		RocCascader,
		RocRadio,
		RocCheckbox,
		RocUploadImage,
		RocUploadFile
	},
	props: {
		// 查询字段json
		queryfcFieldRules: {
			type: Array,
			default() {
				return [];
			}
		},
		// 编辑回显的数据
		showFormData: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	watch: {
		queryfcFieldRules: {
			handler(newJson) {
				const nNewJson = newJson.map(item => {
					if (item.is_range == '1') {
						item.attr_json.search = "rangeSearch";
					} else {
						item.attr_json.search = "search";
					}
					// 搜索字段fc规则提取 （字段效验，只读等查询功能无用的fc规则删除删除）
					if (item.attr_json.value) {
						item.attr_json.value = ''
					}
					if (item.attr_json.validate) {
						delete item.attr_json.validate
					}
					if (item.attr_json.props && item.attr_json.props.readonly) {
						delete item.attr_json.props.readonly
					}
					if (item.attr_json.props && item.attr_json.props.disabled) {
						delete item.attr_json.props.disabled
					}
					// 删除自动填充
					if(item.attr_json.props && item.attr_json.props.likeTableFields) {
						delete item.attr_json.props.likeTableFields
					}
					if(item.attr_json.props && item.attr_json.props.tableFields) {
						delete item.attr_json.props.tableFields
					}
					return item.attr_json;
				});
				this.reqDiyFormJson(nNewJson);
			},
			immediate: true
		}
	},
	data() {
		return {
			// 表单相关
			showForm: false,
			form: {},
			rules: {},
			formRuleJson: [],
			// 当前点击的字段
			curChangeField: ''
		};
	},
	methods: {
		// 当前点击的表单项
		curClickFormItem(item) {
			this.curChangeField = item.field;
		},
		// 表单json信息
		reqDiyFormJson(queryfcFieldRules) {
			this.formRuleJson = queryfcFieldRules;
			this.checkForm(this.formRuleJson);
		},
		// 重置
		resetForm() {
			this.checkForm(this.formRuleJson);
		},
		// 设置表单验证规则
		checkForm(formRuleJson) {
			formRuleJson.forEach(item => {
				this.$set(this.rules, item.field, item.validate);
				// 不同组件默认值
				if (item.type == 'inputNumber') {
					this.$set(this.form, item.field, item.props.min || 0);
				} else if (item.type == 'switch') {
					this.$set(this.form, item.field, item.props.inactiveValue || false);
				} else if (item.type == 'slider') {
					this.$set(this.form, item.field, item.props.min || 0);
				} else if (item.type == 'rate') {
					this.$set(this.form, item.field, 0);
				} else if (item.type == 'cascader') {
					this.$set(this.form, item.field, []);
				} else if (item.type == 'checkbox') {
					this.$set(this.form, item.field, []);
				} else if (item.type == 'upload') {
					this.$set(this.form, item.field, []);
				} else {
					this.$set(this.form, item.field, '');
				}
			});
			this.showForm = true;
			this.$nextTick(() => {
				this.$refs.uForm.setRules(this.rules);
			});
			// 回显数据
			this.$nextTick(() => {
				this.handleShowformData();
			});
		},
		// 表单数据回显
		handleShowformData() {
			if (!Object.keys(this.showFormData).length) return;
			// 回显数据转换
			const newRow = JSON.parse(JSON.stringify(this.showFormData));
			this.form = newRow;
		},
		async submit() {
			await this.$refs.uForm.validate();
			// 提交数据需要将 数组 转换为 逗号分割
			const formData = JSON.parse(JSON.stringify(this.form));
			for (let key in formData) {
				if (uni.$u.test.array(formData[key])) {
					formData[key] = formData[key].join(',');
				}
			}
			this.$emit('roc-submit', formData);
		}
	}
};
</script>

<style lang="scss">
.input-right-slot {
	color: #303133;
	font-size: 26rpx;
}
.u-slider {
	width: 100%;
}
.u-form-item {
	margin-bottom: 16rpx;
}
</style>
